<template>
  <div id="container"></div>
  <button id="back" @click="router.push('/schoolRun')">返回</button>
  <div class="drawer" v-if="isDrawerOpen1">
    <button @click="toggleDrawer" class="drawer-btn"></button>
    <div :class="isDrawerOpen ? 'drawer-content' : 'none'">
      <div class="drawer-head">
        <h1 class="bigger">{{ km == 0 ? "0:00" : km }}</h1>
        <p class="drawer-span">公里</p>
      </div>
      <div class="drawer-body">
        <div>
          <h2>
            {{
              gearing == 0
                ? "0'00"
                : gearing1[0] + "'" + (gearing1[1] * 0.6).toFixed(0) + "''"
            }}
          </h2>
          <p class="drawer-span">配速</p>
        </div>
        <div>
          <h2>
            {{ hour < 10 ? "0" + hour : hour }}:{{
              min < 10 ? "0" + min : min
            }}:{{ second < 10 ? "0" + second : second }}
          </h2>
          <p class="drawer-span">用时</p>
        </div>
        <div>
          <h2>{{ Kcal == 0 ? "--" : Kcal }}</h2>
          <p class="drawer-span">千卡</p>
        </div>
      </div>
      <div class="drawer-foot" v-if="isStart" @click="start">
        <img src="/img/播放.png" />
      </div>
      <div class="drawer-foot" v-if="isStop" @click="stop">
        <img src="/img/暂停.png" />
      </div>
      <div class="drawer-foot" v-if="isRestart">
        <img src="/img/播放.png" @click="reStart" style="margin: 0 20px" />
        <img src="/img/停止.png" @click="close" />
      </div>
    </div>
  </div>

  <div v-if="!isDrawerOpen1" class="drawer-show">
    <div class="drawer-show-head">
      <div style="display: flex; position: relative; width: 50%">
        <p class="bigger">{{ km == 0 ? "0:00" : km }}</p>
        <p style="position: relative; top: 20%">公里</p>
      </div>
      <div>
        小硕子
        <div style="font-size: 18px">{{ date }}</div>
      </div>
    </div>
    <div class="drawer-body">
      <div>
        <h2>
          {{
            gearing == 0
              ? "0'00"
              : gearing1[0] + "'" + (gearing1[1] * 0.6).toFixed(0) + "''"
          }}
        </h2>
        <p class="drawer-span">配速</p>
      </div>
      <div>
        <h2>
          {{ hour < 10 ? "0" + hour : hour }}:{{
            min < 10 ? "0" + min : min
          }}:{{ second < 10 ? "0" + second : second }}
        </h2>
        <p class="drawer-span">用时</p>
      </div>
      <div>
        <h2>{{ Kcal == 0 ? "--" : Kcal }}</h2>
        <p class="drawer-span">千卡</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { onMounted, ref, watchEffect } from "vue";
import axios from "axios";
let hour = ref(0);
let min = ref(0);
let second = ref(0);
let isDrawerOpen = ref(true);
let isDrawerOpen1 = ref(true);
let isStart = ref(true);
let isStop = ref(false);
let isRestart = ref(false);
let timer = null;
let Kcal: any = 0;
let gearing: any = 0;
let gearing1: any;
let km: any = 0;
let distance: any = 0;
let time = new Date();
let date =
  time.getFullYear() +
  "-" +
  (time.getMonth() + 1) +
  "-" +
  time.getDate() +
  "  " +
  time.getHours() +
  ":" +
  time.getMinutes() +
  ":" +
  time.getSeconds();
let day = time.getMonth() + 1 + "-" + time.getDate();
let toggleDrawer = () => {
  isDrawerOpen.value = !isDrawerOpen.value;
};
let start = () => {
  isStart.value = false;
  isStop.value = true;
  timer = setInterval(() => {
    if (second.value < 59) {
      second.value++;
    } else {
      min.value++;
      second.value = 0;
    }
  }, 1000);
};
let stop = () => {
  isStop.value = false;
  isRestart.value = true;
  if (isDrawerOpen1.value) {
    clearInterval(timer);
  }
};
let reStart = () => {
  isRestart.value = false;
  isStop.value = true;
  timer = setInterval(() => {
    if (second.value < 59) {
      second.value++;
    } else {
      min.value++;
      second.value = 0;
    }
  }, 1000);
};
let close = async () => {
  isRestart.value = false;
  isDrawerOpen1.value = false;
  await axios.post("http://8.130.46.189:3000/zxt/add", {
    date: day,
    daykm: km,
    gearing: gearing,
    kcal: Kcal,
    time:
      hour.value.toString() +
      ":" +
      min.value.toString() +
      ":" +
      second.value.toString(),
  });
};
let initMap = () => {
  // 地图初始化
  let map = new AMap.Map("container", {
    zoom: 22,
  });

  AMap.plugin(["AMap.Geolocation"], () => {
    let geolocation = new AMap.Geolocation({
      showCircle: false,
      convert: false,
    });
    map.addControl(geolocation);
    geolocation.getCurrentPosition((status, result) => {
      if (status === "complete") {
        // 获取到当前位置后，将当前位置的经纬度添加到轨迹坐标数组中
        let path = polyline.getPath();
        path.push([result.position.lng, result.position.lat]);
        polyline.setPath(path);
      }
    });
  });
  map.on("moveend", function () {
    // 获取当前地图的中心点坐标
    if (isStop.value == true) {
      var centerPoint = map.getCenter();
      const path = polyline.getPath();
      path.push([centerPoint.lng, centerPoint.lat]);
      polyline.setPath(path);
      var prevPoint = path[0];
      distance = AMap.GeometryUtil.distance(prevPoint, centerPoint);
      for (var i = 1; i < path.length; i++) {
        distance += AMap.GeometryUtil.distance(path[i - 1], path[i]);
      }
    }
    km = Number((distance / 1000).toFixed(2));
    if (min.value + second.value / 60 != 0) {
      gearing = km / (min.value + second.value / 60);
    }
    gearing1 = gearing.toFixed(2).split(".");
    Kcal = (58 * km * 1.1).toFixed(1);
  });
  let polyline = new AMap.Polyline({
    path: [], // 轨迹坐标数组
    strokeColor: "#f00", // 轨迹线颜色
    strokeOpacity: 1, // 轨迹线透明度
    strokeWeight: 3, // 轨迹线宽度
    strokeStyle: "solid", // 轨迹线样式
    strokeDasharray: [10, 5], // 轨迹线样式
  });
  map.add(polyline);
};

onMounted(() => {
  initMap();
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.drawer {
  width: 100%;
  background-color: #4a4e4c;
  position: absolute;
  bottom: 0;
  text-align: center;
  border-radius: 20px 20px 0 0;
}

.drawer-show {
  width: 90%;
  background-color: #fff;
  position: absolute;
  bottom: 10%;
  left: 5%;
  text-align: center;
  border-radius: 10px;
}

.drawer-head {
  margin: 20px 0 30px 0;
}

.drawer-show-head {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.drawer-btn {
  background-color: #8b8e8c;
  border: none;
  width: 10%;
  height: 1vh;
  border-radius: 20px;
}

.drawer-content {
  height: 40vh;
}

.none {
  height: 0;
}

.drawer-body {
  display: flex;
  justify-content: space-around;
  margin: 30px 0;
}

.drawer-span {
  color: #898c8a;
  font-size: 16px;
}

.drawer-show h1,
.drawer-show h2 {
  color: black;
}

h1,
h2 {
  color: white;
  font-size: 30px;
}

img {
  width: 15%;
}

.bigger {
  font-size: 40px;
}

#back {
  position: absolute;
  left: 5%;
  top: 3%;
  background: none;
  padding: 3px 7px;
  border-radius: 10px;
  border: none;
}
</style>
